<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../lib/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../lib/css/bootstrap-treeview.css" />
		<style>
			.treeview .list-group-item.node-checked {
			    color: red;
			}
			.treeview .list-group-item.node-selected {
			    /*color: red;*/
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<h2></h2>
					<div id="treeview-checkable"></div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
		<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../lib/js/bootstrap-treeview.js"></script>

		<script>
			$(function() {
				var defaultData = [{
						text: 'Parent 1',
						href: '#parent1',
						tags: ['4'],
						nodes: [{
								text: 'Child 1',
								href: '#child1',
								tags: ['2'],
								nodes: [{
										text: 'Grandchild 1',
										href: '#grandchild1',
										tags: ['0']
									},
									{
										text: 'Grandchild 2',
										href: '#grandchild2',
										tags: ['0']
									}
								]
							},
							{
								text: 'Child 2',
								href: '#child2',
								tags: ['0']
							}
						]
					},
					{
						text: 'Parent 2',
						href: '#parent2',
						tags: ['0']
					},
					{
						text: 'Parent 3',
						href: '#parent3',
						tags: ['0']
					},
					{
						text: 'Parent 4',
						href: '#parent4',
						tags: ['0']
					},
					{
						text: 'Parent 5',
						href: '#parent5',
						tags: ['0']
					}
				];
				var $this = $('#treeview-checkable').treeview({
					data: defaultData,
					showIcon: false,
					showCheckbox: true,
					highlightSelected : false,
					onNodeChecked: function(event, node, op, op2) {
//						console.log("选中项目为：" + node);
						
						console.log(event);
						console.log(node);
						console.log(op);
						console.log(op2);


						// 父级节点被选中，那么子节点都要选中
						if(node.nodes != null) {
							$.each(node.nodes, function(index, value) {
								$this.treeview('checkNode', value.nodeId, {
									silent: true
								});
							});
						}
						
						// 子节点选中的时候，要根据情况判断父节点是否要全部选中

						// 父节点
						var parentNode = $this.treeview('getParent', node.nodeId);
						
						if(!parentNode["nodeId"]) return;

						
						var isAllchecked = true; // 是否全部选中

						// 当前子节点的所有兄弟节点，也就是获取省下面的所有市
						var siblings = $this.treeview('getSiblings', node.nodeId);
						for(var i in siblings) {
							// 有一个没选中，则不是全选
							if(!siblings[i].state.checked) {
								isAllchecked = false;
								break;
							}
						}

						// 全选，则打钩
						if(isAllchecked) {
							$this.treeview('checkNode', parentNode.nodeId, {
								silent: true
							});
						} else { // 非全选，则变红
							$this.treeview('selectNode', parentNode.nodeId, {
								silent: true
							});
						}
						
					},
					onNodeUnchecked: function(event, node) {
						console.log("取消选中项目为：" + node);

						// 选中的是父级节点
						if(node.nodes != null) {
							// 这里需要控制，判断是否是因为子节点引起的父节点被取消选中
							// 如果是，则只管取消父节点就行了
							// 如果不是，则子节点需要被取消选中
							$.each(node.nodes, function(index, value) {
								$this.treeview('uncheckNode', value.nodeId, {
									silent: true
								});
							});
						} 
						
						// 子节点被取消选中
						var parentNode = $this.treeview('getParent', node.nodeId);
						
						if(!parentNode["nodeId"]) return;

						var isAllUnchecked = true; // 是否全部取消选中

						// 子节点有一个选中，那么就不是全部取消选中
						var siblings = $this.treeview('getSiblings', node.nodeId);
						for(var i in siblings) {
							if(siblings[i].state.checked) {
								isAllUnchecked = false;
								break;
							}
						}

						// 全部取消选中，那么父级节点恢复到默认状态
						if(isAllUnchecked) {
							$this.treeview('unselectNode', parentNode.nodeId, {
								silent: true,
							});
							$this.treeview('uncheckNode', parentNode.nodeId, {
								silent: true,
							});
						} else {
							$this.silentByChild = false;
							$this.treeview('selectNode', parentNode.nodeId, {
								silent: true,
							});
							$this.treeview('uncheckNode', parentNode.nodeId, {
								silent: true,
							});
						}
					}
				});
			});
		</script>
	</body>

</html>